<template>
  <div class="StockWidth f-cb" :class="usActive ? 'active' : ''">
    <div class="StockContent">
      <ul class="f-cb stockList">
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="ListKey == index ? 'on' : ''"
          @click="ListClick(index)"
        >
          <router-link :to="item.url">{{ item.name }}</router-link>
        </li>
        <li v-if="options" :class="ListKey == 4 ? 'on' : ''">
          <el-cascader
            v-model="industryKey"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            :placeholder="$t('m.AllIndustry')"
            @change="handleChange"
          >
          </el-cascader>
        </li>
      </ul>
      <div class="Refresh" @click="reload"></div>
      <router-view :codeList="value" class="work_us"></router-view>
    </div>
    <div class="StockRight fr">
      <AccountRight
        v-if="usActive"
        :SearchShowIs="SearchShowIs"
        @closeClick="closeClick"
      ></AccountRight>
    </div>
  </div>
</template>

<script>
import {get_plate_list} from '@/assets/js/API/market.js';
import AccountRight from "@/components/account/right/AccountRight.vue";
import vPinyin from "@/assets/js/hanziToPinyin.js";
export default {
  components: {
    AccountRight
  },
  inject: ["reload"],
  data() {
    return {
      list: [
        {
          name: this.$i18n.t("m.Market_situation"),
          url: "/us_Market"
        },
        {
          name: this.$t('shStock.sh_Market.57klq52aqee0'),
          url: "/us_All"
        },
        {
          name: this.$i18n.t("m.ChinaStocks"),
          url: "/us_Motherboard"
        },
        {
          name: this.$i18n.t("m.Star_stock"),
          url: "/us_gem"
        }
      ],
      ListKey: 0,
      industryKey: "", // 行业键值
      submit: {
        plateType: "1",
        type: "US",
        securityType: "1",
        order: "DESC",
        pageSize: 200
      },
      options: [], // 行业列表
      tableData: [], // 行业详情列表
      value: "",
      StockData: {},
      SearchShowIs: false
    };
  },
  methods: {
    ListClick(index) {
      (this.industryKey = ""), // 清空行业值
        (this.ListKey = index);
    },
    closeClick() {
      this.$store.dispatch("SetUsActive", false);
    },
    // 点击切换行业
    handleChange(value) {
      this.industryKey = value;
      this.ListKey = 4;
      this.$router.push({ path: `/us_industry/${value[1]}` });
    },
    // 创建适合级联选择器的数据
    async getList() {
      // 数组中添加新对象
      let list = [];
      for (let i = 65; i < 91; i++) {
        let letter = String.fromCharCode(i);
        list.push({ label: letter, value: letter, children: [] });
      }
      await this.getleaddata();
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          let firstLetter = "";
          firstLetter = vPinyin.chineseToPinYin(this.tableData[j].name);
          firstLetter = firstLetter.toUpperCase().substring(0, 1); // 截取首字母第一位
          if (firstLetter == list[i].value) {
            list[i].children.push({
              label: this.tableData[j].name,
              value: this.tableData[j].key
            });
          }
          // 如果遍历到数组中最后一位，对应的字母列表不为空时，保存该子项
          if (j == this.tableData.length - 1 && list[i].children.length != 0) {
            this.options.push(list[i]);
          }
        }
      }
    },
    // 获取行业列表
    async getleaddata() {
      const res = await get_plate_list(this.submit);
      if (res.code != 1) return this.$message.error(res.msg);
      this.tableData = [...this.tableData, ...res.data.list];
    }
  },
  mounted() {
    //this.getoption();
    var _this = this;
    _this.ListKey = _this.$route.meta.index;
    this.getList();
    if(this.$route.params.id) this.industryKey = this.$route.params.id;
  },
  computed: {
    usActive() {
      return this.$store.state.index.usActive;
    }
  },
  watch: {
    $route(to, from) {
      this.ListKey = this.$route.meta.index;
      if (to.params.id && this.ListKey == 4) {
        this.value = to.params.id;
      }
      if(to.params.id) this.industryKey = to.params.id;
    },
    ListKey(val) {
      this.ListKey = val;
    },
  }
};
</script>

<style lang="less">
@import "~@/assets/less/cascader.less";
.StockWidth {
  width: 100%;
  height: 100%;
  background: @deepBg;
  overflow: hidden;
}
.StockContent {
  background: @deepBg;
  width: 100%;
  height: 100%;
  overflow: auto;
  .stockList {
    width: 100%;
    border-bottom: 1px solid @LightBorderLine;
    li {
      float: left;
      min-width: 90px;
      position: relative;
      line-height: 40px;
      font-size: 12px;
      color: @fbSix;
      text-align: center;
      a {
        color: @fbSix;
        display: block;
        width: 100%;
      }
    }
    li:after {
      content: "";
      background: @hoverColor;
      width: 20%;
      height: 2px;
      position: absolute;
      bottom: -1px;
      left: 47%;
      margin-left: -6px;
      opacity: 0;
    }
    li.on a,
    li:hover a {
      color: @hoverColor;
    }
    li.on:after {
      opacity: 1;
    }
  }
  .work_us {
    width: 100%;
    height: calc(100% - 51px);
    padding: 5px 20px 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .Refresh {
    cursor: pointer;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 60px;
    right: 20px;
    background: url(~@/assets/img/icon_sx.png) no-repeat center;
    background-size: 22px;
  }
}
.StockRight {
  width: 0;
  height: 100%;
  overflow: hidden;
}
.StockWidth.active {
  .StockRight {
    width: 380px;
    float: right;
  }
  .StockContent {
    width: calc(100% - 380px);
    float: left;
  }
}
</style>